<template>
  <div>
    <div class="keep">
      <h5>店铺管理</h5>
      <el-button
        style="margin-bottom: 10px"
        type="success"
        @click="preservation"
        >保存</el-button
      >
    </div>
    <p style="display: flex">
      <span>店铺名称</span>
      <el-input
        v-model="shopdata.name"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>店铺公告</span>
      <el-input
        type="textarea"
        :rows="4"
        style="width: 280px"
        v-model="shopdata.bulletin"
      >
      </el-input>
    </p>
    <p style="display: flex; height: 200px">
      <span>店铺头像</span>
      <el-upload
        action="http://127.0.0.1:5000/shop/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        ><img :src="shopdata.avatar" class="avatar" />
      </el-upload>
    </p>
    <p style="display: flex; height: 200px; width: 100%; flex-wrap: wrap">
      <span>照片墙</span>
      <el-upload
        list-type="picture-card"
        :file-list="fileList"
        action="http://127.0.0.1:5000/shop/upload"
        :on-success="picsuccess"
        :on-remove="handleRemove"
      >
      </el-upload>
    </p>
    <p style="display: flex; padding: 0 0 0 12px">
      <span>配送费</span>
      <el-input
        v-model="shopdata.deliveryPrice"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>配送时间</span>
      <el-input
        v-model="shopdata.deliveryTime"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex; height: 100px">
      <span>配送描述</span>
      <el-input
        v-model="shopdata.description"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex">
      <span>店铺评分</span>
      <el-input
        v-model="shopdata.score"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>
    <p style="display: flex; padding: 0 0 0 28px">
      <span>销量</span>
      <el-input
        v-model="shopdata.sellCount"
        style="width: 280px; height: 20px"
      ></el-input>
    </p>

    <p style="display: flex" class="activity">
      <span>添加活动</span>
      <el-input
        v-model="newactive"
        style="width: 280px; height: 20px"
      ></el-input>
      <el-button
        type="primary"
        style="height: 40px; margin-left: 20px; margin-top: 4px"
        @click="shopdata.supports.push(newactive)"
        >添加活动</el-button
      >
    </p>
    <p style="display: flex; width: 100%">
      <el-checkbox-group v-model="activearr">
        <el-checkbox
          v-for="activename in shopdata.supports"
          :key="activename"
          :label="activename"
        />
      </el-checkbox-group>
    </p>
    <p style="display: flex; margin: 20px 30px">
      <span>营业时间</span>
      <el-time-picker
        is-range
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="shopdata.date"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      >
      </el-time-picker>
    </p>
  </div>
</template>
<script>
import { shops, shopedit } from "@/apis/shop";
export default {
  data() {
    return {
      fileList: [], //回显的照片墙数组
      picslist: [], //照片墙所有新老图片的新数组
      newactive: "", //新添加活动的名称
      activearr: [], //选中活动的数组
      shopdata: {},
      time: "",
      describe: "", //描述
      score: "", //评分
      volume: "", //销量
      dates: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], //时间
    };
  },
  methods: {
    // 封装获取页面数据功能
    getlist() {
      shops().then((res) => {
        this.shopdata = res.data.data;
        this.newImg = this.shopdata.avatar.substring(
          //在头像页面修改时给img赋值，修改功能传参时不会传过去undefined
          this.shopdata.avatar.lastIndexOf("/") + 1
        );
        this.fileList = this.shopdata.pics.map((picname) => {
          // 这里如果要返回对象，不能直接省略return
          let name = picname.substring(picname.lastIndexOf("/") + 1);
          this.picslist.push(name);
          return {
            url: picname,
            name,
          };
        });
      });
    },
    // 店铺头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw); //回显到页面使用
      // 新图片this.newImg
      this.newImg = res.imgUrl;
      this.shopdata.avatar = URL.createObjectURL(file.raw);
    },
    // 照片墙
    picsuccess(res) {
      this.picslist.push(res.imgUrl); //每上传一张就往新数组里加一张
    },
    // 删除照片墙图片时的函数,函数是删除图片的name
    handleRemove(file) {
      let pcname = file.response ? file.response.imgUrl : file.name;
      // 循环老数组从中找到名字并删除
      for (let i = 0; i < this.picslist.length; i++) {
        if (this.picslist[i] == pcname) {
          this.picslist.splice(i, 1);
          break;
        }
      }
    },
    // 保存修改数据
    preservation() {
      // 4给特殊处理的地方
      // 1，店铺头像this.newImg，2图片，3活动，4时间
      let params = {
        id: this.shopdata.id,
        name: this.shopdata.name,
        bulletin: this.shopdata.bulletin,
        deliveryPrice: this.shopdata.deliveryPrice,
        deliveryTime: this.shopdata.deliveryTime,
        description: this.shopdata.description,
        score: this.shopdata.score,
        sellCount: this.shopdata.sellCount,
        avatar: this.newImg,
        supports: JSON.stringify(this.activearr),
        date: JSON.stringify(this.shopdata.date),
        pics: JSON.stringify(this.picslist),
      };
      shopedit(params).then((res) => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      });
   this.getlist()
    },
  },
  // 初始化数据时加载列表接口的数据
  created() {
    this.getlist()
  },
};
</script>

<style lang="less" scoped>
.el-card {
  background-color: #fff;
}
.keep {
  align-items: center;
  padding: 0 20px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(240, 238, 238);
  h5 {
    font-weight: normal;
  }
  button {
    color: #fff;
    border: 0;
    border-radius: 2px;
    background-color: rgb(105, 117, 226);
  }
}
p {
  align-content: flex-end;
  width: 500px;
  line-height: 50px;
  height: 50px;
  margin-top: 20px;
  margin-left: 34px;
  span {
    color: #606266;
    font-size: 15px;
    padding-right: 20px;
  }
}
.phont {
  flex-wrap: wrap;
  margin: 15px 0 0 34px;
  height: 300px;
}
.keep-btn {
  font-size: 14px;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar {
  border: 1px dashed #d9d9d9;
  width: 178px;
  height: 178px;
  display: block;
  margin-left: 15px;
}
img {
}
</style>